<template>
  <view>
    <u-navbar title="个人中心" :is-back="false"></u-navbar>
    <view class="header">
      <view class="bg">
        <view class="box">
          <view class="box-hd" @click="goInfo">
            <view class="avator">
              <img :src="user.avatar">
            </view>
            <view class="phone-number">{{ user.nickname }}</view>
          </view>
          <view class="box-bd">
            <view class="item" @click="goNotice">
              <view class="icon"><img src="../../../static/images/user/mine/message.png"></view>
              <view class="text">我的通知</view>
            </view>
            <view class="item" >
              <button open-type="contact" session-from="sessionFrom" bindcontact="handleContact" style="position: fixed;width: 120rpx;height: 120rpx;opacity: 0"></button>
              <view class="icon"><img src="../../../static/images/user/mine/service.png"></view>
              <view class="text">我的客服</view>
            </view>
            <view class="item" @click="showEvaluate" >
              <view class="icon"><img src="../../../static/images/user/mine/evaluate.png"></view>
              <view class="text">我的评价</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list-content">
      <view class="list">
<!--        <view class="li " >-->
<!--          <view class="icon"><image src="../../../static/images/user/mine/help.png"></image></view>-->
<!--          <view class="text">帮助中心</view>-->
<!--          <image class="to" src="../../../static/images/user/mine/to.png"></image>-->
<!--        </view>-->
        <view class="li " @click="goDevice" v-if="user.userType=='user'">
          <view class="icon"><image src="../../../static/images/user/mine/device.png"></image></view>
          <view class="text">我的设备</view>
          <image class="to" src="../../../static/images/user/mine/to.png"></image>
        </view>
        <view class="li " @click="goChangePassword">
          <view class="icon"><image src="../../../static/images/user/mine/changePsw.png"></image></view>
          <view class="text">修改密码</view>
          <image class="to" src="../../../static/images/user/mine/to.png"></image>
        </view>
        <view class="li " @click="goFeedBack">
          <view class="icon"><image src="../../../static/images/user/mine/opinion.png"></image></view>
          <view class="text">意见反馈</view>
          <image class="to" src="../../../static/images/user/mine/to.png"></image>
        </view>
<!--        <view class="li " >-->
<!--          <view class="icon"><image src="../../../static/images/user/mine/about.png"></image></view>-->
<!--          <view class="text">关于我们</view>-->
<!--          <image class="to" src="../../../static/images/user/mine/to.png"></image>-->
<!--        </view>-->

      </view>
    </view>

    <view class="footer">
      <button type="warn" @click="logOut">退出登陆</button>
    </view>
  </view>
</template>
<script>
import {UserService} from "../../../api/user";
import {
  http
} from '@/api/service.js'
export default {
  data() {
    return {
      user:uni.getStorageSync('userInfo').userInfo,
      operates:[
        {
          icon:"",
          title:"",
          url:"",
          userType:"",
        }
      ]
    };
  },
  onLoad() {
  },
  methods: {
    changeSkin(){
      uni.navigateTo({
        url: '../skin-change/skin-change'
      });
    },
    goFeedBack(){
      uni.navigateTo({
        url: '/pages/public/mine/feedBack/index'
      });
    },
    goNotice(){
      uni.navigateTo({
        //保留当前页面，跳转到应用内的某个页面
        url: '/pages/normalUser/public/Notice/index'
      })
    },
    goInfo(){
      uni.navigateTo({
        //保留当前页面，跳转到应用内的某个页面
        url: '/pages/public/mine/personalInfo/index'
      })
    },
    goDevice(){
      uni.navigateTo({
        //保留当前页面，跳转到应用内的某个页面
        url: '/pages/public/mine/device/index'
      })
    },
    goChangePassword(){
      uni.navigateTo({
        //保留当前页面，跳转到应用内的某个页面
        url: '/pages/public/mine/changePassword'
      })
    },
    showEvaluate(){
      uni.navigateTo({
        //保留当前页面，跳转到应用内的某个页面
        url: '/pages/normalUser/public/Evaluate/my/index'
      })
    },
    /*退出登录*/
    logOut(){
      // http.post('/logout')
      UserService.logOut().then(res=>{
        console.log("res",res)
        if(res.statusCode==200){
          //清除登录信息
          this.user={};
          //清空token，userInfo，tabList
          uni.setStorageSync('token', null);
          uni.setStorageSync('userInfo',null);
          uni.setStorageSync('tabList',null);
          this.$store.state.socket.closeWebSocket();
          this.$store.dispatch("REMOVE_SOCKET");
          uni.showToast({
            title: '退出登录成功',
            icon: 'none'
          });

          //退出后跳转至登录页
          uni.redirectTo({
            url:"/pages/public/login/login",
            success:res =>{
            },
            fail:() =>{
            },
            complete:() => {
            }
          });
        }
      }).catch(err=>{
        console.log("err,",err)
      })

    },

    handleContact(e) {
      console.log(e.detail.path)
      console.log(e.detail.query)
    }
  }
}
</script>

<style lang="scss">
page{
  background-color:#f1f1f1;
  font-size: 30upx;
}
.header{
  background: #fff;
  height: 460upx;
  padding-bottom: 110upx;
  .bg{
    width: 100%;
    height:200upx;
    padding-top:100upx;
    background-color:#4191ea;
  }
}
.box{
  width: 650upx;
  height: 280upx;
  border-radius: 20upx;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2);
  .box-hd{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    .avator{
      width: 160upx;
      height: 160upx;
      background: #fff;
      border: 5upx solid #fff;
      border-radius: 50%;
      margin-top: -80upx;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .phone-number{
      width: 100%;
      text-align: center;
    }
  }
  .box-bd{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    .item{
      flex: 1 1 auto;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      border-right: 1px solid #f1f1f1;
      margin: 15upx 0;
      &:last-child{
        border: none;
      }
      .icon{
        width: 60upx;
        height: 60upx;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .text{
        width: 100%;
        text-align: center;
        margin-top: 10upx;
      }
    }
  }
}
.list-content{
  background: #fff;
}
.list{
  width:100%;
  border-bottom:15upx solid  #f1f1f1;
  background: #fff;
  &:last-child{
    border: none;
  }
  .li{
    width:92%;
    height:100upx;
    padding:0 4%;
    border-bottom:1px solid rgb(243,243,243);
    display:flex;
    align-items:center;
    &.noborder{
      border-bottom:0
    }
    .icon{
      flex-shrink:0;
      width:50upx;
      height:50upx;
      image{
        width:50upx;
        height:50upx;
      }
    }
    .text{
      padding-left:20upx;
      width:100%;
      color:#666;
    }
    .to{
      flex-shrink:0;
      width:40upx;
      height:40upx;
    }
  }
}
.footer{
  width: 90%;
  margin: 40rpx auto auto;
}
</style>
